<?php echo $this->render('/public/header'); ?>
    <style>
        input[type=file] {
            display: none;
        }
    </style>
    <script src="https://cdn.bootcss.com/element-ui/1.4.2/index.js"></script>
    <link href="https://cdn.bootcss.com/element-ui/1.4.2/theme-default/index.css" rel="stylesheet">
    <div id="main" class="col-xs-12">
        <div class="col-xs-3 col-xs-offset-3" id="app">
            <div class="form-inline">
                <a class="btn btn-success" href="javascript:window.history.go(-1)">返回</a>
            </div>
            <br/>
            <br/>
            <div class="form-group">
                <label for="exampleInputEmail1">日期</label>
                <el-date-picker
                        style="width:100%"
                        default-value="new Date()"
                        v-model="date"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">数量</label>
                <input type="number" class="form-control" v-model="number">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">名称</label>
                <input type="text" class="form-control" v-model="name">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">报销金额</label>
                <input type="number" class="form-control" v-model="fee">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">报销凭证图片</label>
                <el-upload
                        drag
                        class="upload-demo"
                        action="/sell/upload_img"
                        :on-success="handlesucess"
                        list-type="picture"
                        :show-file-list="false">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>
                <div v-for=" v in img">
                    <img :src="v" style="max-width:200px">
                </div>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">invoice</label>
                <input type="text" class="form-control" v-model="invoice">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">客户全名</label>
                <el-autocomplete
                        style="width:100%"
                        class="inline-input"
                        v-model="customer_name"
                        :fetch-suggestions="querySearch"
                        placeholder="请输入内容"
                        :trigger-on-focus="false"
                        @select="handleSelect"
                ></el-autocomplete>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">客户编号</label>
                <input type="text" class="form-control" v-model="customer_num">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">国家</label>
                <input type="text" class="form-control" v-model="country">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">性质</label>
                <el-select v-model="type" value-key style="width:100%" filterable>
                    <el-option key=1 value="1" label="大货"></el-option>
                    <el-option key=2 value="2" label="样品"></el-option>
                    <el-option key=2 value="3" label="其他"></el-option>
                </el-select>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">类别</label>
                <el-select v-model="type2" style="width:100%" filterable>
                    <el-option value="1" label="样品"></el-option>
                    <el-option value="2" label="交通(本地)"></el-option>
                    <el-option value="3" label="快递"></el-option>
                    <el-option value="4" label="其他"></el-option>
                    <el-option value="5" label="差旅(异地)"></el-option>
                </el-select>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">备注</label>
                <el-input autoSize type="textarea" v-model="remark"></el-input>
            </div>

            <button type="submit" class="btn btn-success" @click="upload">提交审核</button>
        </div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                date: "<?php echo date('Y-m-d');?>",
                number: 1,
                name: "",
                fee: 0.00,
                customer_name: "",
                country: "",
                type: "",
                img: [],
                remark: "",
                invoice: "",
                type2: "",
                customer_num:'',
                options:<?php echo json_encode($this->params['list']);?>
            },
            methods: {
                handlesucess: function (res) {
                    this.img.push(res.msg);
                },

                querySearch: function (queryString, cb) {
                    console.log(queryString);
                    $.post('/api/search_customer_by_like', {name: queryString}, (res) => {
                        if (res.code==1) {
                            cb(res.data);
                        }
                    },'json')
                },

                handleSelect: function(v){
                    this.customer_num = v.number;
                },

                upload: function () {
                    this.$confirm('确认提交').then(()=>{
                        if (this.img.length == 0) {
                            this.$message({
                                message: '报销凭证图片还未上传',
                                type: 'error'
                            });
                            return;
                        }
                        if (!this.type) {
                            this.$message.error("性质未填");return false;
                        }
                        if (!this.type2) {
                            this.$message.error("类别未填");return false;
                        }
                        var str = JSON.stringify(this.$data);
                        $.post('/setting/upload_baoxiao', {data: str}, function (res) {
                            if (res.code == 1) {
                                vm.$message({
                                    message: res.msg,
                                    type: 'success'
                                });
                            }
                            else {
                                vm.$message({
                                    message: res.msg,
                                    type: 'error'
                                });
                            }
                        }, 'json')
                    })
                }
            }
        })
    </script>
<?php echo $this->render('/public/footer'); ?>